﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <title></title>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <style>
        ul {
            list-style: circle;
        }

        li {
            margin-left: 20px;
        }
    </style>
</head>
<body>

    <script type="text/ng-template" id="tree_item_renderer.html">
        {{data.name}}
        <button ng-click="add(data)">Add node</button>
        <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
        <button ng-click="show(data.id)">show children</button>
        <ul id="ch{{data.id}}" style="display:none;">
            <li style="padding:10px;" ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
        </ul>
    </script>


    <ul ng-controller="TreeController">
        <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
    </ul>

    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script>
        angular.module("myApp", []).
            controller("TreeController", ['$scope', function ($scope) {
                $scope.delete = function (data) {
                    data.nodes = [];
                };
                $scope.add = function (data) {
                    var post = data.nodes.length + 1;
                    var newName = data.name + '-' + post;
                    data.nodes.push({ name: newName, nodes: [] });
                };

                $scope.show = function (id) {

                    $('#ch' + id).slideToggle();

                };

                $scope.tree = [{ name: "Node", id: 1, nodes: [] },
                { name: "Node", id: 2, nodes: [] },
                { name: "Node", id: 3, nodes: [] },
                { name: "Node", id: 4, nodes: [] },
                { name: "Node", id: 5, nodes: [] },
                { name: "Node", id: 6, nodes: [] }];
            }]);
    </script>

</body>
</html>
